<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="div_id">
    <select v-on:change="change" v-model="s1">
        <option v-for="item in arr" v-bind:value="item.name">{{item.name}}</option>
    </select><select v-on:change="change1" v-model="s2">
        <option v-for="item in arr2"  v-bind:value="item.name">{{item.name}}</option>
    </select>
    </select><select v-on:change="change1">
        <option v-for="item in arr3"  v-bind:value="item.name">{{item.name}}</option>
    </select>
    selected : {{arr2}}
</div>
</body>
<script src="./data/vue.min.js"></script>
<script src="./data/items.js"></script>
<script>
    const app=new Vue({
        el:"#div_id",
        data(){
            return{
                arr:arrAll,
                arr2:[],
                arr3:[],
                s1:null,
                s2:null,
                map:new Map()
            }
        },
        created(){
            //console.log(this.arr)
            //list to map
            this.list2Map(this.arr);
            console.log(this.map);
        },
        methods:{
            change:function () {
                let key=this.s1;
                let value=this.map.get(key);
                this.arr2=value;
            },
            change1:function () {
                let key=this.s2;
                let value=this.map.get(key);
                this.arr3=value;
            },
            list2Map:function (arr) {
                if(arr.length===0){
                    return;
                }
                for(let index in arr){
                    let key=arr[index].name;
                    let value=arr[index].sub;
                    if(typeof(value)=='object'){
                        this.list2Map(value);
                    }
                    value=typeof(value)=='undefined'?'':value;
                    this.map.set(key,value);
                }

            }
        }
    })
</script>
</html>